<template>
    <div class="pad20">
        <el-card class="box-card">
            <el-form :inline="true" :model="searchVo" class="demo-form-inline" size="mini">
                <el-form-item label="广告标题">
                    <el-input v-model="searchVo.title" placeholder="请输入导航标题"></el-input>
                </el-form-item>
                <el-form-item label="状态：" >
                    <el-select v-model="searchVo.status" class="auto-width" clearable filterable placeholder="状态" style="width: 85px">
                        <el-option
                                v-for=" item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button icon='el-icon-search' size="mini" type="primary" @click="handleCheck">查询</el-button>
                    <el-button icon='el-icon-refresh' size="mini" @click="handleReset">重置</el-button>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleAddRow">添加</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-table v-loading="ctrl.loading" size="medium" :data="tableData" stripe border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="id" v-if="false" label="轮播id" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="imageUrl" label="轮播图片" width="222" align="center">
                        <template slot-scope="scope">
                            <img  :src="scope.row.imageUrl" width="200" height="50"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" align="center">

                    </el-table-column>
                    <el-table-column
                            prop="sort"
                            label="排序"
                            width="100"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="gmtCreate"
                            label="创建时间"
                            width="180"
                            align="center"
                            value-format=”yyyy-MM-dd”
                    >
                    </el-table-column>
                    <el-table-column prop="gmtModified" label="更新时间" width="180" align="center">
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            prop="isDisable"
                            align="center"
                            width="200">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.isDisable"
                                    :active-value="1"
                                    :inactive-value="0"
                                    active-color="#ff4949"
                                    inactive-color="#13ce66"
                                    active-text="禁用"
                                    inactive-text="正常"
                                    @change="changeStatus(scope.row)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="170"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <ul class="list-item-actions">
                                <li>
                                    <el-button
                                            type="danger"
                                            size="mini"
                                            :disabled="scope.row.isDisable==0"
                                            @click="handleDelete(scope.row.id)">删除</el-button>
                                    <el-button type="success" size="mini" @click="handleUpdateRow(scope.row)">编辑</el-button>
                                </li>
                            </ul>
                        </template>
                    </el-table-column>
                </el-table>

                <el-divider><i class="el-icon-moon-night"></i></el-divider>
                <!--分页-->
                <div class="mgt20">
                    <el-pagination
                            background
                            style="float: right;margin-top: 20px; margin-bottom: 22px"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[1, 5, 10, 15]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
            <add :visible="ctrl.addDialogVisible"  :title="ctrl.dialogTitle" @close-callback="closeCallback"></add>
            <edit :visible="ctrl.dialogVisible" :editformData="editformData" :title="ctrl.dialogTitle" @close-callback="closeCallback"></edit>
        </el-card>
    </div>
</template>

<script>
    import Add from "./add";
    import Edit from "./edit";
    export default {
        name: "LunBoManagement",
        components: {Edit, Add},
        data(){
            return{
                currentPage:1,
                pageSize:5,
                //总条数
                total:0,
                editformData:{},
                //表单数据对象
                formData:{
                    title:"",
                    isDisable:"",
                    pageCurrent:0,
                    pageSize:0
                },
                searchVo:{
                    title:"",
                    status:null,
                },
                //下拉选项框的数据
                options:[{
                    value: 0,
                    label: '正常'
                },
                    {
                        value: 1,
                        label: '禁用'
                    },
                ],
                tableData:[],
                ctrl: {
                    loading: false,
                    remoteAuthorLoading: false,
                    dialogVisible: false,
                    addDialogVisible: false
                },
            }
        },
        created() {
            this.init()
        },
        methods:{
            //新增
            handleAddRow() {

                this.ctrl.dialogTitle = '新增'
                this.ctrl.addDialogVisible = true
                console.log("111")
            },
            //编辑
            handleUpdateRow(data) {
                this.editformData = data
                this.ctrl.dialogTitle = '编辑'
                this.ctrl.dialogVisible = true
                this.init();
            },
            // 关闭编辑弹窗回调
            closeCallback() {
                this.ctrl.dialogVisible = false;
                this.ctrl.addDialogVisible = false
                this.reload()
            },
            //改变当前页数
            handleSizeChange(val) {
                this.pageSize=val;
                this.searchVo.pageSize=val;
                this.init();
            },
            //改变当前每页的条数
            handleCurrentChange(val) {
                this.currentPage=val;
                this.searchVo.current=val;
                this.init();
            },
            handleCheck(){
                this.init()
            },
            handleReset(){
                this.reload()
            },
            reload(){
                this.searchVo.status=null
                this.searchVo.title=""
                this.init()
            },
            //初始化表格
            init(){
                this.$http.post("/firstpage/api/banner/getBannerByTitle/"+this.currentPage+"/"+this.pageSize,this.searchVo).then(res=>{
                    this.tableData=res.data.data.records
                    this.currentPage=res.data.data.current
                    this.total=res.data.data.total
                })
            },
            //改变状态
            changeStatus(row){
                console.log(row)
                this.$http.put("/firstpage/api/banner/updateBanner",row).then(res=>{
                    console.log(row);
                    if (res.data.code===2000){
                        this.$message.success("修改轮播图状态成功")
                       this.init();
                   }
                })
            },
            //删除
            handleDelete(id) {
                var that = this;
                this.$confirm(`确定删除这条数据?`, '我要删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that = this;
                    this.$http.get("/firstpage/api/banner/delBanner/" + id).then(function (resp) {
                        if (resp.data.code === 2000) {
                            that.init();
                            that.$message({
                                message: resp.data.msg,
                                type: "success"
                            })

                        } else {
                            that.$message({
                                message: resp.data.msg,
                                type: "error"
                            })
                        }

                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>